<template>
  <div>
    <el-drawer
      :title="title"
      :before-close="handleClose"
      :visible.sync="dialog"
      direction="rtl"
      custom-class="drawer"
      ref="drawer"
    >
      <div class="drawer__content">
        <el-form
          :model="form"
          :rules="rules"
          ref="ruleForm"
          :hide-required-asterisk="true"
        >
          <el-form-item label="系统名称:" :label-width="formLabelWidth">
            <el-tag type="success">
              <i class="el-icon-s-home"></i>
              {{ SystemName }}</el-tag
            >
          </el-form-item>
          <el-form-item label="菜单类型:" :label-width="formLabelWidth">
            <el-radio-group
              v-model="form.ModulesType"
              @change="ModulesTypeChange"
            >
              <el-radio :label="0">目录</el-radio>
              <el-radio :label="1">菜单</el-radio>
              <el-radio :label="2">按钮</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="上级菜单:" :label-width="formLabelWidth">
            <treeselect
              v-model="form.TopModulesId"
              :multiple="false"
              :options="sjcdOptions"
              :searchable="true"
              placeholder="请选择上级组织"
              noResultsText="暂无匹配项"
              :normalizer="normalizer"
              @select="sjcdChange"
            />
          </el-form-item>
          <el-form-item
            label="名称:"
            :label-width="formLabelWidth"
            prop="ModulesName"
          >
            <el-input
              v-model="form.ModulesName"
              placeholder="请输入名称"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="请求方式:"
            :label-width="formLabelWidth"
            prop="RequestMethod"
            v-if="form.ModulesType == '2'"
          >
            <el-select
              v-model="form.RequestMethod"
              placeholder="请选择请求方式"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="链接地址:"
            :label-width="formLabelWidth"
            prop="LinkUrl"
            v-if="form.ModulesType == '1' || form.ModulesType == '2'"
          >
            <el-input
              v-model="form.LinkUrl"
              placeholder="请输入链接地址"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="授权标识:"
            :label-width="formLabelWidth"
            prop="PermissionCode"
            v-if="form.ModulesType == '1' || form.ModulesType == '2'"
          >
            <el-input
              v-model="form.PermissionCode"
              autocomplete="off"
              placeholder="请输入授权标识"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="路由名称:"
            :label-width="formLabelWidth"
            prop="Action"
            v-if="form.ModulesType == '1' || form.ModulesType == '2'"
          >
            <el-input
              v-model="form.Action"
              placeholder="请输入路由名称"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="控制器名称:"
            :label-width="formLabelWidth"
            prop="Controller"
            v-if="form.ModulesType == '2'"
          >
            <el-input
              v-model="form.Controller"
              placeholder="请输入控制器名称"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="是否授权:"
            :label-width="formLabelWidth"
            v-if="form.ModulesType == '2'"
          >
            <el-radio-group v-model="form.NeedAuthorization">
              <el-radio :label="true">是</el-radio>
              <el-radio :label="false">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="状态:" :label-width="formLabelWidth">
            <el-radio-group v-model="form.Status">
              <el-radio :label="true">启用</el-radio>
              <el-radio :label="false">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="排序:" :label-width="formLabelWidth">
            <el-input v-model="form.OrderSort" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="备注:" :label-width="formLabelWidth">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="form.Description"
            >
            </el-input>
          </el-form-item>
        </el-form>

        <div class="drawer__footer">
          <el-button @click="cancelForm" style="width: 45%">取 消</el-button>
          <el-button
            style="width: 45%"
            type="primary"
            @click="submit"
            :loading="loading"
            >{{ loading ? "提交中 ..." : "确 定" }}</el-button
          >
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import {
  AccessModules_GetModulesTree,
  AccessModules_post,
  AccessModules_put,
} from "@/api/business";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  components: { Treeselect },
  name: "",

  data() {
    return {
      dialog: false,
      loading: false,
      values: [],
      options: [
        {
          value: "GET",
          label: "GET",
        },
        {
          value: "POST",
          label: "POST",
        },
        {
          value: "PUT",
          label: "PUT",
        },
        {
          value: "DELETE",
          label: "DELETE",
        },
      ],
      form: {
        ManagementId: JSON.parse(localStorage.getItem("xmGlDetails")).Id,
        TopModulesId: null,
        ModulesType: 0,
        ModulesName: "",
        RequestMethod: "",
        LinkUrl: "",
        NeedAuthorization: true,
        PermissionCode: "",
        Controller: "",
        Action: "",
        Description: "",
        Status: true,
        OrderSort: 1,
      },
      SystemName: JSON.parse(localStorage.getItem("xmGlDetails")).SystemName,
      formLabelWidth: "110px",
      title: "新增",
      value: null,
      sjcdOptions: [],
      normalizer(node) {
        if (node.children && !node.children.length) {
          delete node.children;
        }
      },
      fieldsToValidate: ["ModulesName"],
      rules: {
        ModulesName: [
          {
            required: true,
            message: "请输入名称",
            trigger: ["change", "blur"],
          },
        ],
        LinkUrl: [
          {
            required: true,
            message: "请输入链接地址",
            trigger: ["change", "blur"],
          },
        ],
        PermissionCode: [
          {
            required: true,
            message: "请输入授权标识",
            trigger: ["change"],
          },
        ],
        Controller: [
          {
            required: true,
            message: "请输入控制器名称",
            trigger: ["change"],
          },
        ],
        Action: [
          {
            required: true,
            message: "请输入路由名称",
            trigger: ["change"],
          },
        ],
        RequestMethod: [
          {
            required: true,
            message: "请选择请求方式",
            trigger: ["change"],
          },
        ],
      },
    };
  },

  mounted() {},

  methods: {
    async show(data) {
      this.dialog = true;
      let obj = {};
      if (data) {
        this.title = "编辑";
        this.form = data;
        obj.managementId = JSON.parse(localStorage.getItem("xmGlDetails")).Id;
        obj.id = data.Id;
      } else {
        this.title = "新增";
        obj.managementId = JSON.parse(localStorage.getItem("xmGlDetails")).Id;
        obj.id = null;
      }
      let res = await AccessModules_GetModulesTree(obj);
      this.sjcdOptions = res.data.response;
    },
    sjcdChange(raw, instanceId) {
      console.log(raw, "当前的对象");
    },
    ModulesTypeChange(data) {
      console.log(data);
      this.$refs.ruleForm.clearValidate();
      if (data == 0) {
        this.fieldsToValidate = ["ModulesName"];
      }
      if (data == 1) {
        this.fieldsToValidate = [
          "ModulesName",
          "LinkUrl",
          // "PermissionCode",
          "Action",
        ];
      }
      if (data == 2) {
        this.fieldsToValidate = [
          "ModulesName",
          "LinkUrl",
          "RequestMethod",
          // "PermissionCode",
          // "Action",
          // "Controller",
        ];
      }
    },
    submit() {
      this.loading = true;
      Promise.all(
        this.fieldsToValidate.map((item) => {
          return new Promise((resolve, reject) => {
            this.$refs["ruleForm"].validateField(item, (result) => {
              resolve(result);
            });
          });
        })
      ).then((result) => {
        // result返回各个字段的验证信息，如果为空字符串则认为验证通过
        let msg = result.find(async (res) => {
          if (res != "") {
            this.loading = false;
            return false;
          } else {
            if (this.title == "新增") {
              var vals = await AccessModules_post(this.form);
            } else {
              var vals = await AccessModules_put(this.form);
            }

            if (vals.data.success) {
              this.loading = false;
              this.dialog = false;
              this.$refs.ruleForm.clearValidate();
              this.reset();
              this.$emit("getData");
              this.$emit("editData");
              this.$message({
                type: "success",
                message: vals.data.msg,
              });
            } else {
              this.$message({
                type: "error",
                message: vals.data.msg,
              });
            }
          }
        });
      });
    },
    handleClose(done) {
      this.dialog = false;
    },
    reset() {
      this.form = {
        ManagementId: JSON.parse(localStorage.getItem("xmGlDetails")).Id,
        TopModulesId: null,
        ModulesType: 0,
        ModulesName: "",
        LinkUrl: "",
        NeedAuthorization: true,
        PermissionCode: "",
        Controller: "",
        Action: "",
        Description: "",
        Status: true,
        OrderSort: 1,
      };
    },
    cancelForm() {
      this.loading = false;
      this.dialog = false;
      this.$refs.ruleForm.clearValidate();
      this.reset();
    },
  },
};
</script>

<style  scoped>
.drawer__footer {
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 12px;
}
/deep/ .el-select {
  width: 100%;
}
/deep/ .el-form-item__label {
  font-size: 15px;
}
</style>
